<template>
  <div class='my-container'>
    <el-row type="flex" class="item">
      <el-col :span="3" class="select-node">
        <el-radio ref="radio" v-if="selectType==='1'" :label="value.code">{{ this.value.code + ':' }}</el-radio>
        <el-checkbox v-model="value.isRight" v-else-if="selectType==='2'" :label="value.code"/>
      </el-col>
      <el-col :span="21">
        <el-form-item
          :prop="'options.' + index + '.title'"
          :rules="[{ required: showOptionView, message: '选项标题不能为空', trigger: 'blur' }]">
          <el-input v-model="value.title"/>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'questions-select',
  props: {
    selectType: {
      type: String,
      default: '1'
    },
    index: {
      type: Number,
      default: 0
    },
    select: {},
    value: {
      type: Object,
      default: function () {
        return {
          // hook el-radio data
          isRight: false,
          code: String.fromCharCode('A'.charCodeAt(0) + this.index),
          title: null,
          img: null
        }
      },
      validator: function (value) {
        // 数值转换
        value.isRight = Boolean(value.isRight)
        return true
      }
    }
  },
  data () {
    return {
      // hook el-radio data
      isRight: false,
      code: String.fromCharCode('A'.charCodeAt(0) + this.index),
      title: null,
      img: null
    }
  },
  watch: {
    select: {
      handler () {
        this.value.isRight = this.select === this.value.code
      }
    },
    value: {
      deep: true,
      handler (newValue, oldValue) {
        if (newValue === oldValue) {
          if (this.value.isRight && this.selectType === '1') {
            this.$emit('onSingleSelect', this.value.code)
          }
        } else {
          this.$emit('input', this.value)
        }
      }
    }
  },
  computed: {
    showOptionView () {
      return this.selectType !== '3'
    }
  },
  created () {
    this.$emit('input', this.value)
  }
}
</script>

<style scoped lang='less'>
.my-container {
  margin: 20px 0;

  .item {
    align-items: center;

    .select-node {
      height: 100%;
      vertical-align: center;
    }
  }
}
</style>
